<template>
  <div class="buttonGroup">
    <el-button class="buttons" type="primary" @click="query">查询</el-button>
    <el-button class="buttons" type="success" @click="dialogVisible = true"
      >增加</el-button
    >
    <el-dialog
      title="增加一条信息 "
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="product"
        :rules="rules"
        ref="product"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="入库日期" prop="inboundDate">
          <el-col :span="11">
            <el-date-picker
              type="date"
              v-model="product.inboundDate"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="商品编号" prop="productID">
          <el-col :span="15"><el-input v-model="product.productID"></el-input></el-col>
        </el-form-item>
        <el-form-item label="商品名称" prop="productName">
           <el-col :span="15"><el-input v-model="product.productName"></el-input></el-col>
        </el-form-item>
        <el-form-item label="产地" prop="placeOfOrigin">
          <el-col :span="15"><el-input v-model="product.placeOfOrigin"></el-input></el-col>
        </el-form-item>
      </el-form>
      <!-- <el-descriptions
        direction="vertical"
        :column="4"
        :model="ruleForm"
        :rules="rules"
        refs="ruleForm"
        border
      >
        <el-descriptions-item label="入库日期" :span="1" prop="name">
          <el-input
            v-model="ruleForm.name"
            suffix-icon="el-icon-date"
          ></el-input
        ></el-descriptions-item>
        <el-descriptions-item label="商品编号" :span="1"
          ><el-input v-model="product.productID"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="商品名称" :span="2"
          ><el-input v-model="product.productName"></el-input
        ></el-descriptions-item>
        <el-descriptions-item label="产地"
          ><el-input v-model="product.placeOfOrigin"></el-input
        ></el-descriptions-item>
      </el-descriptions> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onInsert"
          >确 定</el-button 
        >
      </span>
    </el-dialog>
    <el-button class="buttons" type="info" @click="deleteBatch"
      >批量删除
    </el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      product: {
        inboundDate: "",
        productID: "",
        productName: "",
        placeOfOrigin: "",
      },
      rules: {
        inboundDate: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        productName: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },
        ],
        productID: [
          { required: true, message: "请输入商品编号", trigger: "blur" },
        ],
        placeOfOrigin: [
          { required: true, message: "请输入产地", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    query() {
      this.clickSelect();
    },
    onInsert(index) {
      if (
        !this.product.inboundDate ||
        !this.product.productID.trim() ||
        !this.product.productName.trim() ||
        !this.product.placeOfOrigin.trim()
      )
        return alert("输入不能为空");
      const obj = {
        date: this.computedDate,
        id: this.product.productID,
        name: this.product.productName,
        address: this.product.placeOfOrigin,
      };
      this.insert(obj);
      this.product.inboundDate = "";
      this.product.productID = "";
      this.product.productName = "";
      this.product.placeOfOrigin = "";
      this.dialogVisible = false;
    },
    deleteBatch(){
      //1.list表勾选后将选中序号发送给公共组件
      //2.点击批量删除触发
      //3.判断是否勾选,调用公共组件方法删除对应序号的对象
      if(!this.deleteList){return alert("未勾选任何对象")}
      this.deleteAll(this.deleteList);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  computed:{
   computedDate(){
     //增添功能时间格式
      return this.product.inboundDate.getFullYear()+"-"+parseInt(this.product.inboundDate.getMonth()+1)+"-"+this.product.inboundDate.getDate();
    }
  },
  props: ["clickSelect", "insert","deleteAll","deleteList"],
};
</script>
<style lang="scss" scoped>
.buttonGroup {
  width: 20%;
  display: flex;
  .buttons {
    margin: 0 5px;
  }
}
</style>
